<template>
    <el-dialog
        class="custom-modal"
        :title="title"
        :visible.sync="show"
        append-to-body
        top="20vh"
        @open="_open"
        @close="_close"
        @closed="_afterClose"
        v-auto-focus
        center
    >
        <validation-observer ref="observerRef">
            <el-form
                class="custom-form"
                label-position="right"
                label-width="120px"
                ref="formRef"
            >
                <validation-provider
                    name="model.cover"
                    :rules="'required'"
                    :customMessages="{ required: '请上传' + (uploadType === 'image' ? '图片':'视频') }"
                    v-slot="{ errors }"
                    slim
                >
                    <el-form-item :label="'上传' + (uploadType === 'image' ? '图片':'视频')" required>
                        <div
                            class="cf__group upload"
                            :class="{ error: errors.length > 0 }"
                        >
                            <div class="cf__group-info">
                                <ask-upload
                                    v-model="model.cover"
                                    name="model.cover"
                                    cover-upload
                                    :option="{
                                        type: uploadType,
                                        limit: uploadType === 'image'  ? limitImage : limitVideo
                                    }"
                                    :path="(uploadType === 'image' ? uploadImagePath : uploadVideoPath)"
                                >
                                </ask-upload>
                            </div>
                            <div class="cf__group-tips">
                                <template v-if="errors.length > 0">
                                    {{ errors[0] }}
                                </template>
                                <template v-else>
                                    <template v-if="uploadType === 'image'">
                                        图片格式支持jpg、jpeg、png、gif，大小在{{limitImage.value}}M以内<br>
                                        图片尺寸建议 宽度750px，以防图片被拉伸
                                    </template>
                                </template>
                            </div>
                        </div>
                    </el-form-item>
                </validation-provider>
                <el-form-item label="关键字" v-if="uploadType === 'image'">
                    <div class="cf__group">
                        <div class="cf__group-info">
                            <el-input
                                v-model="model.keywords"
                                name="model.keywords"
                                placeholder="请输入关键字"
                                maxlength="30"
                                auto-complete="off"
                            >
                            </el-input>
                        </div>
                        <div class="cf__group-tips">
                            关键字长度不能超过30个字,将会存放在标签属性alt和title中
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </validation-observer>
        <div slot="footer" class="dialog-footer">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="sure">保存</el-button>
        </div>
    </el-dialog>
</template>
<script>
export default {
    name: "EditorToolbarUpload",
    data() {
        return {
            title: "文件上传",
            show: false,
            ajaxLoader: false,
            ajaxIndex: 0,
            uploadImagePath: "form-description/img/",
            uploadVideoPath: "form-description/video/",
            uploadType: "image",
            limitImage: {
                value: 10
            },
            limitVideo: {
                value: 300
            },
            path: "",
            model: {
                cover: {},
                keywords: ""
            }
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.isReady = true;
        });
    },
    methods: {
        _open() {
            this.$emit("onopen");
        },
        _close() {
            this.$emit("onclose");
        },
        _afterClose() {
            this.$nextTick(function() {
                this.$emit("onafterclose");
                this.$el.remove && this.$el.remove();
            });
        },
        loader(state) {
            if (state) {
                if (this.ajaxIndex === 0) this.ajaxLoader = true;
                this.ajaxIndex++;
            } else {
                setTimeout(() => {
                    this.ajaxIndex--;
                    if (this.ajaxIndex === 0) this.ajaxLoader = false;
                }, 300);
            }
        },
        close() {
            this.show = false;
        },
        async sure() {
            const validateResult = await this.$refs.observerRef.validate();
            if (!validateResult) {
                return this.$message({
                    duration: 3000,
                    message: '请确保表单数据有效！',
                    type: 'error'
                });
            }
            this.$emit("sure", this.model);
        }
    }
};
</script>
<style scoped lang="scss">
.custom-modal {
    margin: 0;
    & /deep/ {
        .el-dialog{
            width: 700px;
        }
    }
}

.upload {
    padding-bottom: 44px!important;
    .cf__group-tips {
        line-height: 22px!important;
        height: 44px!important;
    }
}
</style>
